<template>
  <div class="re-wrap" v-loading = "loading">
    <div class="gs-nav">我要卖货 > 结案报告</div>
    <div class="re-list">
      <template v-if="report.length">
        <div class="re-list-item" v-for="(item,index) in report" :key="index">
        <img class="re-list-left-img" v-lazy="item.mainUrl" :key="item.mainUrl">
          <div class="re-list-right">
            <div class="re-list-item-txt">
              <div class="re-item-title">直播主题:  {{item.title}}</div>
              <div class="re-item-time">时间:  <span>{{item.startTime}}</span><span>{{item.endTime}}</span></div>
              <div class="re-item-platform">
                <p class="re-item-platform-name">平台：{{item.platformName}}</p>
                <img class="re-item-platform-icon" :src="item.platformIcon" alt="正在加载">
              </div>
              <div class="re-item-name">主播：{{item.anchorName}}</div>
              <div class="re-item-data">
                <div class="re-item-data-item">
                  <img class="re-item-data-icon" src="~assets/images/rep-icon1.png" alt="">
                  <p class="re-item-data-txt">最高在线人数</p>
                  <p class="re-item-data-number">{{item.highOnlineNum}}</p> 
                </div>
                <div class="re-item-data-item">
                  <img class="re-item-data-icon" src="../../assets/images/rep-icon2.png" alt="">
                  <p class="re-item-data-txt">累计观看人数</p>
                  <p class="re-item-data-number">{{item.viewNum}}</p> 
                </div>
                <div class="re-item-data-item">
                  <img class="re-item-data-icon" src="../../assets/images/rep-icon3.png" alt="">
                  <p class="re-item-data-txt">订单数</p>
                  <p class="re-item-data-number">{{item.orderNum}}</p> 
                </div>
                <div class="re-item-data-item">
                  <img class="re-item-data-icon" src="../../assets/images/rep-icon4.png" alt="">
                  <p class="re-item-data-txt">订单转化率</p>
                  <p class="re-item-data-number">{{item.orderConvertRate}}</p> 
                </div>
              </div>
            </div>
            <!-- <div class="re-list-item-btn" @click="go('/livedes')">查看详情</div> -->
            <div class="re-list-item-btn" @click="go(item.id)">查看详情</div>
          </div>
        </div>
      </template>
      <div class="no-wrap" v-else>暂无数据</div>
    </div>
    <div class="pagination"  v-show = "total > 0"> 
      <el-pagination
        background
        :current-page = "pageNum"
        @current-change="changeCurrentPage"
        :page-sizes="[8,16,24]"
        @size-change="changeCurrentPageSize"
        :total = "total"
        layout="total, sizes, prev, pager, next, jumper"
      >
      </el-pagination>
	  	<div class="pageSearch" @click="pageSearch">确定</div>
    </div>
  </div>
</template>
<script>
export default {
  async fetch({store}) {
    await store.commit('setToolsIndex',1)
  },
  layout: 'internalouts',
  mounted() {
  },
  components: {
  },
  data() {
    return {
      report:[],
      pageNum:1, //第一页
      pageSize:8, //每页的条数
      total:0, //总条数
      loading:false, //页面加载效果
    }
  },
  methods: {
    changeCurrentPage(page){ //改变当前页数
      this.pageNum = page; //赋值给当前页
      this.caseResult(); //调用结案报告接口
      this.$scrollTo();
    },
    changeCurrentPageSize(pageSize){ //改变条数
      this.pageNum = 1; //重新请求第一页
      this.pageSize = pageSize;  //设置条数
      this.caseResult();//调用结案报告接口
      this.$scrollTo();
    },
    pageSearch(){ //点击确定按钮时候调用分页事件
      this.caseResult();//调用结案报告接口
      this.$scrollTo();
		},
    caseResult(){ //结案报告
      this.loading = true;
      let params ={
        pageSize:this.pageSize,
        pageNum:this.pageNum,
      }
      this.$axios.$post('caseResult',params).then(res => {
        this.loading = false;
        if(res.status === 200 ){
          this.report = res.obj.list;
          this.total = res.obj.total;
        }else{
          this.$message.warning(res.msg);
        }
      })
        .catch(error => {
          this.$message.warning('请求失败');
          this.loading = false;
        })
    },
    go(id){
      this.$router.push({
        path:'/livedes',
        query:{id:id}
      })
    }
  },
  mounted(){
    this.caseResult(); //调用结案报告
  }
}
</script>

<style scoped>
  .re-list-item {
    background: #fff;
    border-radius: 5px;
    padding: 20px;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }
  .re-list-left-img {
    width: 220px;
    height: 220px;
  }
  .re-list-right {
    flex: 1;
    margin-left: 24px;
    display: flex;
    align-items: flex-end;
  }
  .re-item-title {
    color: #333;
    font-size: 16px;
  }
  .re-item-time {
    font-size: 12px;
    color: #333;
    margin-top: 12px;
  }
  .re-item-time span{
    margin-right:10px;
  }
  .re-item-platform {
    display: flex;
    align-items: center;
    margin-top: 10px;
  }
  .re-item-platform-name {
    font-size: 12px;
    color: #333;
  }
  .re-item-platform-icon {
    width: 16px;
    height: 16px;
    margin-left: 5px;
  }
  .re-item-name {
    font-size: 12px;
    color: #333;
    margin-top: 12px;
  }
  .re-item-data {
    margin-top: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .re-list-item-txt {
    width: 422px;
  }
  .re-item-data-item {
    width: 25%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .re-item-data-icon {
    width: 27px;
    height: 27px;
  }
  .re-item-data-txt {
    color: #666;
    font-size: 12px;
    margin-top: 10px;
  }
  .re-item-data-number {
    color: #ff6600;
    font-size: 14px;
    margin-top: 12px;
  }
  .re-list-item-btn {
    width: 100px;
    height: 30px;
    background: #0096e6;
    color: #fff;
    text-align: center;
    line-height: 30px;
    border-radius: 100px;
    margin-left: 80px;
    cursor: pointer;
    user-select: none;
  }
  .re-list-item-btn:hover {
    background:#66B1FF;
  }
  /* 暂无数据的css样式 */
  .no-wrap{
    height:40px;
    line-height:40px;
    text-align:center;
    background:#ffffff;
    font-weight:bold;
    letter-spacing:2px;
    color:#666666;
    font-size:18px;
    border-radius:4px;
    box-shadow:0 0 6px #c2c2c2;
    margin:0 0 20px 0;
  }
  /* 分页样式 */
  .pagination{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    margin:0 0 50px 0;
  }
  .pagination .pageSearch{
    width:60px;
    height:28px;
    line-height:28px;
    text-align:center;
    border-radius:15px;
    background:#0096e6;
    color:#ffffff;
    font-size:14px;
    cursor:pointer;
    margin-left:10px;
    user-select:none;
  }
  .pagination .pageSearch:hover{
    background:#66B1FF;
  }
  /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active{
    background-color:#0096e6;
  }
</style>
